<script setup lang="ts">
import type { ElTree } from 'element-plus'
// ------------------use------------------
// #region
const { vLoading, withLoading } = useDefineLoading()
const [isDetailDialog, setIsDetailDialog]
  = useState<boolean>(false)
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const treeRef = ref<InstanceType<typeof ElTree>>()
const detailContentType = ref<string>('图表')
const filterInputValue = ref<string>('')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region
watch(
  () => filterInputValue.value,
  (value: string) => {
    treeRef.value!.filter(value)
  },
)
// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
}
function showDetailDialog() {
  setIsDetailDialog(true)
}
function reset() {
  getTableData()
}
function search() {
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="padding-sm padding-sm box-border gap-sm container"
  >
    <el-table
      v-loading
      :data="tableData"
      class="width-fill height-fill"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column label="用能单元" width="200">
        <el-button link type="primary">
          全厂
        </el-button>
      </el-table-column>
      <el-table-column label="时间区间">
        当日
      </el-table-column>
      <el-table-column label="其它原煤(吨)">
        <el-button
          link
          type="primary"
          @click="showDetailDialog"
        >
          6666.66
        </el-button>
      </el-table-column>
      <el-table-column label="天然气（气态）(立方米)">
        <el-button
          link
          type="primary"
          @click="showDetailDialog"
        >
          6666.66
        </el-button>
      </el-table-column>
      <el-table-column label="电力(千瓦时)">
        <el-button
          link
          type="primary"
          @click="showDetailDialog"
        >
          6666.66
        </el-button>
      </el-table-column>
      <el-table-column label="综合能耗(吨标准煤)">
        -----
      </el-table-column>
    </el-table>
    <!-- 详情 -->
    <el-dialog
      v-model="isDetailDialog"
      title="全厂-一次能源-其它原煤-购进已消费"
      width="1200"
      append-to-body
    >
      <div
        class="align-center margin-bottom-xs flex justify-between"
        style="margin-top: -10px"
      >
        <div>
          <el-date-picker
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <el-button
            class="margin-left-sm"
            @click="reset"
          >
            重置
          </el-button>
          <el-button type="primary" @click="search">
            查询
          </el-button>
        </div>
        <el-radio-group v-model="detailContentType">
          <el-radio-button label="图表" />
          <el-radio-button label="表格" />
        </el-radio-group>
      </div>
      <div
        v-loading
        style="height: 50vh; margin-bottom: -15px"
      >
        <el-table
          v-if="detailContentType === '表格'"
          :data="[]"
          class="flex-fillRemaining width-fill height-fill"
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column label="时间">
            <el-button type="primary" link />
          </el-table-column>
          <el-table-column label="数值">
            {{ '---' }}
          </el-table-column>
        </el-table>
        <ViewChartLine v-else />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setIsDetailDialog(false)">
            关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.container {
  --container-left-w: 240px;
  &-left {
    width: var(--container-left-w);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    transition: all var(--motion-bezier) 0.3s;
    &:hover {
      box-shadow: 0 8px 32px #0000000d;
    }
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
